<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{baseui/head :: head}">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="动检通智慧云平台"/>
    <meta name="author" content="牧中(上海)物联网科技有限公司"/>
    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>
    <link rel="stylesheet" href="/webjars/js/layui/css/layui.css" media="all">
    <title>牧中畜牧业大数据智慧云平台V1.0</title>


</head>
<body>
<!--顶部一级导航-->
<th:block th:replace="baseui/topheader :: topheader(2)"/>


<!--平台管理菜单-->
<div id="topnav" th:replace="management/partial/topnav :: topnav(2)"></div>


<div id="cl-wrapper">
    <!--左边导航-->
    <th:block th:replace="management/partial/factory_left :: nav(4)"/>

    <div class="container-fluid" id="pcont">
        <!--<div class="page-head">-->
        <!--<h3>生产记录</h3>-->
        <!--</div>-->


        <div class="row">
            <div class="col-md-12">
                <div class="block-flat">
                    <div class="header"><h3>角色</h3></div>
                    <div class="content">
                        <div class="table-responsive">
                            <div id="datatable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">


                                <div class="row">

                                    <!-- search-->

                                    <div style="white-space: nowrap">










                                        <span style="margin-left: 50px">   角色名称:



                                           <input placeholder="角色名称"
                                                  class="form-control layer-date"
                                                  id="roleName"/>
                                                        </span>


                                        <span style="margin-left: 50px">
                                                <button class="btn btn-primary" onclick="SearchBtn()">确定</button>
                                                </span>


                                        <span style="margin-right:50px;">
                                                <button th:if="${userProfile!=null}" class="btn btn-primary"
                                                        onclick="add()">增加养殖场</button>

                                        </span>
                                    </div>


                                    <!--
                                                                            <div class="col-sm-6">
                                                                            <div id="datatable_filter" class="dataTables_filter">
                                                                            <label>区域:<select class="select2">
                                                                                <option value="所有区域">所有区域</option>
                                                                                <optgroup label="襄阳市">
                                                                                    <option value="南漳县">南漳县</option>
                                                                                    <option value="其它县">其它县</option>
                                                                                </optgroup>
                                                                            </select>


                                                                            </label></div>
                                                                            </div>
                                                                        </div>
                                    -->
                                    <div class="row">
                                        <div class="col-sm-12">

                                            <!-- Table -->
                                            <table id="jqGrid"></table>
                                            <div id="jqGridPager"></div>

                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

</div>

<script type="text/javascript" src="/webjars/js/jquery.js"></script>
<script type="text/javascript" src="/webjars/js/jquery.gritter/js/jquery.gritter.js"></script>

<script type="text/javascript" src="/webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
<script type="text/javascript" src="/webjars/js/behaviour/general.js"></script>
<script src="/webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript" src="/webjars/js/jquery.nestable/jquery.nestable.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/webjars/js/jquery.select2/select2.min.js" type="text/javascript"></script>
<script src="/webjars/js/skycons/skycons.js" type="text/javascript"></script>
<script src="/webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="/webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.summernote/dist/summernote.min.js"></script>


<script type="text/javascript" src="/webjars/js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>


<script src="/webjars/js/behaviour/voice-commands.js"></script>
<script src="/webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>

<script type="text/ecmascript" src="/webjars/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/ecmascript" src="/webjars/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="/webjars/js/laydate/laydate.js"></script>
<script src="//vuejs.org/js/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="/webjars/js/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">

    $(document).ready(function () {

        App.init();

        //grid
        $("#jqGrid").jqGrid({
            url: '/plantform/rolelist',
            mtype: "GET",
            styleUI: 'Bootstrap',
            datatype: "json",
            autowidth: true,
            colModel: [
                {label: '序号', name: 'id', key: true, width: 100, align: 'center'},
                {label: '<span style="text-align: center">角色名称</span>', name: 'name', width: 150, align: 'center'},
                {
                    label: '<span style="text-align: center">角色说明</span>',
                    name: 'infomation',
                    width: 200,
                    align: 'center'
                },
                {
                    label: '<span style="text-align: center">创建时间</span>',
                    name: 'createdAt',
                    width: 200,
                    align: 'center',
                    formatter: ShowDate
                },

                {
                    label: '<span style="text-align: center">操作</span>',
                    width: 200,
                    formatter: ShowOpertator,
                    align: 'center'
                }
            ],
            viewrecords: true,
            align: 'center',
            height: 350,
            rowNum: 20,
            pager: "#jqGridPager"
        });

    });
    function ShowDate(cellvalue, options, rowObject) {
        if (cellvalue != null && cellvalue != "") {
            var timestamp4 = new Date(cellvalue);
            var dt = timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8);
            return dt;
        } else {
            return "";
        }
    }


    function SearchBtn() {
        var name = $("#roleName").val();


        var sdata = {   // 构建查询需要的参数
            name: name

        };

        var postData = $("#jqGrid").jqGrid("getGridParam", "postData");

        $.extend(postData, sdata);

        $("#jqGrid").jqGrid("setGridParam", {
            search: true    // (6)将jqGrid的search选项设为true
        }).trigger("reloadGrid", [{page: 1}]);   // (7)重新载入Grid表格，以使上述设置生效

    }

    function ShowOpertator(cellvalue, options, rowObject) {
        var link;
        var row = rowObject['id'];
        link = "<button type='button' class='layui-btn layui-btn-radius' name='" + rowObject.name + "' id='" + row + "' butId='" + row + "' onclick='select(this.id)'>授权</button>";
        return link;
    }

    function select(id) {
        layui.use(['laypage', 'layer'], function () {
            var $ = layui.jquery, layer = layui.layer;
            var name = $("[butId=" + id + "]").attr("name");
            layer.confirm('确认要修改' + name + '的权限？',
                {
                    btn: ['确认', '取消']

                }, function (index, layero) {
                    layer.open({
                        type: 2,
                        // skin: 'layui-layer-lan',
                        area: ['800px', '500px'],
                        title: '修改角色权限',
                        content: ['/management/role/updateRole', 'no'],
                        success: function (layero, index) {
                            var body = layer.getChildFrame('body', index);
                            var iframeWin = window[layero.find('iframe')[0]['name']];

                            body.find("#name").val(name);
                            body.find("#roleId").val(id);
                        },
                        btn: ['保存', '取消'],
                        btn1: function (index, layero) {
                            var body = layer.getChildFrame('body', index);
                            var iframeWin = window[layero.find('iframe')[0]['name']];
                            var ids = new Array();
                            body.find("input[name='check']:checked").each(function () {
                                ids.push($(this).val());
                            })

                            var data = {
                                ids: ids.toString(),
                                id: id
                            }
                            layer.msg('请再次查看信息是否有误', {
                                time: 5000, //5s后自动关闭
                                btn: ['确定', '取消'],
                                btnAlign: 'c',
                                btn1: function (index, layero) {
                                    $.ajax({
                                        type: "GET",
                                        url: "/management/role/doUpdateRole",
                                        data: data,
                                        dataType: "json",
                                        success: function (data) {
                                            if (data) {
                                                layer.msg('修改成功', {
                                                    btn: '确定',
                                                    time: 5000,
                                                    btnAlign: 'c',
                                                    area: ['150px', '100px'],
                                                    btn1: function (index, layero) {
                                                        window.location.href = "/plantform/rolemgr";
                                                    }
                                                });
                                            } else {
                                                layer.msg('修改失败', {
                                                    btn: '确定',
                                                    time: 5000,
                                                    btnAlign: 'c',
                                                    area: ['150px', '100px']
                                                });
                                            }

                                        }

                                    });

                                }

                            });


                        }

                    });
                }, function (index) {
                    layer.close();
                })

        })
    }

</script>


</body>
</html>
